<template>
  <div>
    <!-- 对话框 -->
    <el-dialog
      :title="titleText"
      :visible="showDialog"
      width="60%"
      @close="onClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="企业名称" prop="tags">
          <el-input v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="shortName">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>

        <el-form-item label="城市地区" class="pull-down" prop="province">
          <el-col :span="10">
            <el-select
              placeholder="请选择"
              v-model="form.province"
              @change="onProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="9">
            <el-select placeholder="请选择" v-model="form.city">
              <el-option
                v-for="item in citysList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="方向(企业标签)" prop="company">
          <el-input v-model="form.company"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            class="text"
            v-model="form.remarks"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'usersadd',
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    CompileList: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      form: {
        tags: '',
        shortName: '',
        city: '',
        remarks: '',
        company: '',
        isFamous: true,
        province: ''
      },

      provinceList: provinces(),
      citysList: [],
      rules: {
        tags: [
          { required: true, message: '请输入正确的企业名称', trigger: 'blur' }
        ],
        shortName: [
          { required: true, message: '请输入所属公司', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入企业标签', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请填写备注', trigger: 'blur' }
        ]
      }

    }
  },
  watch: {
    CompileList: {
      deep: true,
      immediate: true,
      handler () {
        console.log(111111)
        console.log(this.CompileList)
        this.form = this.CompileList
      }
    }
  },

  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    titleText () {
      return this.form.id ? '编辑' : '新增'
    }
  },

  created () {

  },

  methods: {
    onClose () {
      this.$emit('update')
    },
    onProvince (value) {
      this.citysList = citys(value)
      this.form.city = this.citysList[0]
    },
    async onDialog () {
      try {
        this.$refs.form.validate()
        this.form.isFamous = true
        await add(this.form)
        this.$message.success('添加成功')
        this.onClose()
        this.$emit('loadDialog')
        this.$refs.form.resetFields()
      } catch (err) {
        console.log(123)
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-form-item {
  margin: 20px !important;
  p {
    padding: 0 40px;
  }
}
/deep/.el-form-item__label {
  width: 120px !important;
}
/deep/.el-input {
  width: 700px !important;
}
/deep/.text {
  width: 700px;
}
/deep/.pull-down {
  /deep/.el-input {
    width: 300px !important;
  }
}
/deep/.el-form-item__error {
  margin: 0 35px !important;
}
</style>
